{% extends "base.html" %}
{% block content %}
		<h2 class="mb-4"><span class="me-2">☕</span>Buy Me a Coffee</h2>
		<p>Buy SOLDANI tokens to support DJ Dani at <strong>0.005 SOL</strong> each.</p>

		<h4>SOLDANI Token</h4>
		<div class="d-flex align-items-center gap-4">
    		<img src="{{ token.image }}" alt="SOLDANI" width="100" class="rounded-circle">
	    <div>
    	<p><strong>Name:</strong> {{ token.name }}</p>
	    <p><strong>Description:</strong> {{ token.description }}</p>
    	</div>
	</div>

	<form class="mt-4">
	    <div class="mb-3">
			<label for="amount" class="form-label">How many SOLDANI?</label>
			<input type="number" id="amount" name="amount" class="form-control" placeholder="e.g., 5">
    	</div>
    	<button type="submit" class="btn btn-success">Buy SOLDANI</button>
	</form>

  <hr>
  <h4>Support with Bitcoin</h4>
  <p>
    <code id="btc-address">bc1q2fglq9j9mmetxe3uf4heta6n62yexpwwssan0u</code>
    <button onclick="copyToClipboard('btc-address')" class="btn btn-sm btn-outline-secondary ms-2">
      <img src="{{ url_for('static', filename='icons/copy.svg') }}" class="bi" width="32" alt="copy to clipboard">
    </button>
  </p>
  <img src="{{ url_for('get_qrcode', address='bc1q2fglq9j9mmetxe3uf4heta6n62yexpwwssan0u') }}" alt="BTC QR" width="150">

  <h4 class="mt-4">Support with SOL</h4>
  <p>
    <code id="sol-address">3M5Rv2zhAWiDszZHNtQagdC1y8jRAnNpNQ5qTqFapsv2</code>
    <button onclick="copyToClipboard('sol-address')" class="btn btn-sm btn-outline-secondary ms-2">
      <img src="{{ url_for('static', filename='icons/copy.svg') }}" class="bi" width="32" alt="copy to clipboard">
    </button>
  </p>
  <img src="{{ url_for('get_qrcode', address='3M5Rv2zhAWiDszZHNtQagdC1y8jRAnNpNQ5qTqFapsv2') }}" alt="SOL QR" width="150">

  <script>
    function copyToClipboard(id) {
      const el = document.getElementById(id);
      navigator.clipboard.writeText(el.innerText).then(() => {
        alert("Address copied to clipboard!");
      });
    }
  </script>
{% endblock %}

